﻿@model IEnumerable<MvcApplication1.Models.Producto>

<style>
    .modal-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background-color: #000000;
    }

        .modal-backdrop.fade {
            opacity: 0;
        }

            .modal-backdrop,
            .modal-backdrop.fade.in {
                opacity: 0.8;
                filter: alpha(opacity=80);
            }

    .modal {
        position: fixed;
        top: 10%;
        left: 50%;
        z-index: 1050;
        width: 560px;
        margin-left: -280px;
        background-color: #ffffff;
        border: 1px solid #999;
        border: 1px solid rgba(0, 0, 0, 0.3);
        *border: 1px solid #999;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        outline: none;
        -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        background-clip: padding-box;
    }

        .modal.fade {
            top: -25%;
            -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
            -o-transition: opacity 0.3s linear, top 0.3s ease-out;
            transition: opacity 0.3s linear, top 0.3s ease-out;
        }

            .modal.fade.in {
                top: 10%;
            }

    .modal-header {
        padding: 9px 15px;
        border-bottom: 1px solid #eee;
    }

        .modal-header .close {
            margin-top: 2px;
        }

        .modal-header h3 {
            margin: 0;
            line-height: 30px;
        }

    .modal-body {
        position: relative;
        max-height: 400px;
        padding: 15px;
        overflow-y: auto;
    }

    .modal-form {
        margin-bottom: 0;
    }

    .modal-footer {
        padding: 14px 15px 15px;
        margin-bottom: 0;
        text-align: right;
        background-color: #f5f5f5;
        border-top: 1px solid #ddd;
        -webkit-border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
        border-radius: 0 0 6px 6px;
        *zoom: 1;
        -webkit-box-shadow: inset 0 1px 0 #ffffff;
        -moz-box-shadow: inset 0 1px 0 #ffffff;
        box-shadow: inset 0 1px 0 #ffffff;
    }

        .modal-footer:before,
        .modal-footer:after {
            display: table;
            line-height: 0;
            content: "";
        }

        .modal-footer:after {
            clear: both;
        }

        .modal-footer .btn + .btn {
            margin-bottom: 0;
            margin-left: 5px;
        }

        .modal-footer .btn-group .btn + .btn {
            margin-left: -1px;
        }

        .modal-footer .btn-block + .btn-block {
            margin-left: 0;
        }

    .hide {
        display: none;
    }

    .show {
        display: block;
    }

    .fade {
        opacity: 0;
        -webkit-transition: opacity 0.15s linear;
        -moz-transition: opacity 0.15s linear;
        -o-transition: opacity 0.15s linear;
        transition: opacity 0.15s linear;
    }

        .fade.in {
            opacity: 1;
        }

    

</style> 
@{
    ViewBag.Title = "Listado";
}

<form> 
                        <label> 
                            <span>Buscar un producto: </span> 
                            <input type="text" name="term"/> 
                        </label> 
                        <input type="submit" value="Buscar"/> 
                </form>

<h2 style="color:black;">Listado</h2>


<table class="pure-table" style="color:white;">
    <tr>
        <th style="color:fuchsia;">Articulo
        </th>
        <th  style="color: darkred;">Modelo
        </th>
        <th  style="color:yellow;">Marca
        </th>
        <th  style="color:lawngreen;">Precio
        </th>
        <th  style="color:coral;">
            Eliminar
        </th>
        <th style="color: white;">
            Editar
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                 <form method="post" action="~/Default1/Details/@item.id"> 
                                    <input type="hidden" name="id" value ="@item.id" /> 
                                        <a data-toggle="modal" href="#@item.id" class="pure-button">@Html.DisplayFor(modelItem => item.nombre)</a> 

                                    <div id="@item.id" class="modal hide fade in" style="background-color: lightgray; color:palevioletred;">


                         <div class="modal-header"> 
                            <div align="right"><button class="close" data-dismiss="modal">×</button> 
                          </div>
                                <h3>Producto</h3>
                           </div>
                  <div class="modal-body">
                          <p>@item.nombre</p><p>@item.marca</p><p>@item.modelo</p> <p>@item.precio</p> <p>@item.descripcion</p>
                           <img src="@item.foto" width="50px" height="50px" />
                   </div>
                  <div class="modal-footer" style="background-color:lightgray">
                           
                   </div>
                    </div>
                </form>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.modelo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.marca)
            </td>
            <td>
                $ @Html.DisplayFor(modelItem => item.precio)
            </td>
            
            <td>
                


                <form method="post" action="~/Default1/Delete">
                    <input type="hidden" name="id" value ="@item.id" />
                    <a data-toggle="modal" href="#@item.id" class="pure-button" width="100px"><i class="fa fa-trash-o"></i>Eliminar</a>
                    <div id="myModal" class="modal hide fade in" style="background-color: lightgray;color:palevioletred;">
                        <div class="modal-header">
                            <div align="right"><button class="close" data-dismiss="modal">×</button></div>
                            <h3>Confirmar Eliminacion</h3>
                        </div>
                        <div class="modal-body">
                            <h4 style="color:black;">¿Está seguro de que desea eliminar este elemento?</h4>
                            <p>@item.nombre</p><p>@item.modelo</p>
                            <img src="@item.foto" width="50px" height="50px" />

                        </div>
                        <div class="modal-footer" style="background-color:lightgray">
                            <input type="submit" value="Si" class="pure-button" style=" background: rgb(202, 60, 60); color:white;  " />
                            <input type="button" value="No" class="pure-button" data-dismiss="modal" style="background: rgb(28, 184, 65); color:white;"/>
                        </div>
                    </div>
                </form>
            </td>

        <td>
        <a href="~/Default1/Edit/@item.id" class="pure-button" >Editar</a>
              
             
        </td>
        </tr>
    }
</table> 
   


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> 